<template>
    <Card>
        <div @keydown.enter="queryData(true)">
            <Form ref="queryForm" :model="queryParams" :label-width="80" :inline="false">
                <Row :gutter="8">
                    <Col span="5">
                        <FormItem label="登录名" prop="username">
                            <Input v-model="queryParams.username" placeholder="请输入" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="用户名" prop="nickname">
                            <Input v-model="queryParams.nickname" placeholder="模糊匹配" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="手机号" prop="telephone">
                            <Input v-model="queryParams.telephone" placeholder="请输入" clearable></Input>
                        </FormItem>
                    </Col>
                    <Col span="5">
                        <FormItem label="用户类型" prop="userType">
                            <Select v-model="queryParams.userType" placeholder="请选择" clearable>
                                <Option v-for="item in userTypeArray" :key="item.value" :value="item.value">{{ item.label }}</Option>
                            </Select >
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <Button type="primary" style="margin-left: 8px" @click="queryData(true)">查询</Button>
                        <Button type="ghost" style="margin-left: 5px" @click="queryReset">重置</Button>
                        <Button type="primary" style="margin-left: 5px" @click="showAddModal">新增</Button>
                    </Col>
                </Row>
            </Form>
        </div>

        <Table :columns="tableColumns" :data="tableData.list" :loading="tableLoading" stripe border />
        <div style="margin: 10px;overflow: hidden;height: 80px;">
            <div style="float: right;">
                <Page 
                    show-total 
                    show-elevator 
                    show-sizer
                    :page-size-opts="[10, 20, 50, 100]"
                    :total="tableData.total" 
                    :current="tableData.pageNum" 
                    :page-size="tableData.pageSize" 
                    placement="top" 
                    @on-change="pageChange"
                    @on-page-size-change="pageSizeChange"
                />
            </div>
        </div>

        <Modal title="编辑用户信息" :mask-closable="false" v-model="editModal.show">
            <Form ref="editForm" :model="editParams" :label-width="70" :inline="false" :rules="editFormRuleValidate">
                <Row>
                    <FormItem label="登录名" prop="username">
                        <Input v-model="editParams.username" :readonly="true"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="用户名" prop="nickname">
                        <Input v-model="editParams.nickname" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="手机号" prop="telephone">
                        <Input v-model="editParams.telephone" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="邮箱" prop="email">
                        <Input v-model="editParams.repositoryUrl" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="所属部门" prop="memberOf">
                        <Input v-model="editParams.memberOf" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="是否锁定" prop="locked">
                        <RadioGroup v-model="editParams.locked">
                            <Radio :label="0">未锁定</Radio>
                            <Radio :label="1">锁定</Radio>
                        </RadioGroup>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="是否启用" prop="enabled">
                        <RadioGroup v-model="editParams.enabled">
                            <Radio :label="1">启用</Radio>
                            <Radio :label="0">禁用</Radio>
                        </RadioGroup>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="说明" prop="description">
                        <Input v-model="editParams.description" type="textarea" :rows="3" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="closeEditModal">取消</Button>
                <Button type="primary" :loading="editModal.loading" @click="updateRowSubmit">确定</Button>
            </div>
        </Modal>

        <Modal title="新增用户" :mask-closable="false" v-model="addModal.show">
            <Form ref="addForm" :model="addParams" :label-width="90" :inline="false" :rules="addFormRuleValidate">
                <Row>
                    <FormItem label="登录名" prop="username">
                        <Input v-model="addParams.username" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="用户名" prop="nickname">
                        <Input v-model="addParams.nickname" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="密码" prop="password">
                        <Input type="password" v-model="addParams.password" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="确认密码" prop="passwordConfirm">
                        <Input type="password" v-model="addParams.passwordConfirm" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="手机号" prop="telephone">
                        <Input v-model="addParams.telephone" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="邮箱" prop="email">
                        <Input v-model="addParams.repositoryUrl" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="所属部门" prop="memberOf">
                        <Input v-model="addParams.memberOf" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
                <Row>
                    <FormItem label="说明" prop="description">
                        <Input v-model="addParams.description" type="textarea" :rows="3" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="请输入"></Input>
                    </FormItem>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="text" @click="closeAddModal">取消</Button>
                <Button type="primary" :loading="addModal.loading" @click="addRowSubmit">确定</Button>
            </div>
        </Modal>
    </Card>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import { getUser } from '../../api/ServerApi';

export default {
    data () {
        return {
            userTypeArray: [
                { value: '0', label: '自定义用户' },
                { value: '1', label: 'LDAP用户' },
            ],
            ldapExistArray: [
                { value: '0', label: '不存在', color: '#ff9900' },
                { value: '1', label: '存在', color: '#19be6b' },
            ],
            lockedArray: [
                { value: '0', label: '未锁定', color: '#19be6b' },
                { value: '1', label: '锁定', color: '#ff9900' },
            ],
            enabledArray: [
                { value: '0', label: '禁用', color: '#ff9900' },
                { value: '1', label: '启用', color: '#19be6b' },
            ],
            tableColumns: [
                // { title: '#', type: 'index', width: 60, align: 'center' },
                { title: '登录名', key: 'username', width: 100,  render: (h, { row }) => {
                    return h('a', { attrs: { href: `#/user/detail/${row.username}` }}, row.username);
                }},
                { title: '用户名', key: 'nickname', width: 100 },
                { title: '手机号', key: 'telephone', width: 120 },
                { title: '邮箱', key: 'email', width: 190 },
                { title: '组织机构', key: 'memberOf', width: 120 },
                { title: '用户类型', key: 'userType', width: 100, render: (h, { row }) => {
                    let userType = this.$data.userTypeArray.find(item => item.value==row.userType);
                    if(userType && userType.label){
                        userType = userType.label;
                    } else {
                        userType = '未知';
                    }
                    return h('span', userType); 
                }},
                { title: 'LDAP中存在', key: 'ldapExist', width: 120, render: (h, { row }) => {
                    let ldapExist = this.$data.ldapExistArray.find(item => item.value==row.ldapExist);
                    if(!ldapExist || !ldapExist.label){
                        ldapExist = { value: '', label: '未知', color: '#ed3f14' }
                    }
                    return h('span', { style: { color: ldapExist.color } }, ldapExist.label); 
                }},
                { title: '是否锁定', key: 'locked', width: 100, render: (h, { row }) => {
                    let locked = this.$data.lockedArray.find(item => item.value==row.locked);
                    if(!locked || !locked.label){
                        locked = { value: '', label: '未知', color: '#ed3f14' }
                    }
                    return h('span', { style: { color: locked.color } }, locked.label); 
                }},
                { title: '是否启用', key: 'enabled', width: 100, render: (h, { row }) => {
                    let enabled = this.$data.enabledArray.find(item => item.value==row.enabled);
                    if(!enabled || !enabled.label){
                        enabled = { value: '', label: '未知', color: '#ed3f14' }
                    }
                    return h('span', { style: { color: enabled.color } }, enabled.label); 
                }},
                { title: '说明', key: 'description', width: 190, render: (h, { row }) => {
                    const style = {
                        'display': 'inline-block',
                        'width': '180px',
                        'overflow': 'hidden',
                        'white-space': 'nowrap',
                        'text-overflow': 'ellipsis'
                    };
                    return h('span', { style: style, attrs: { title: row.description } }, row.description); 
                }},
                { title: '创建时间', key: 'createAt', width: 150 },
                { title: '更新时间', key: 'updateAt', width: 150 },
                { title: '操作', key: '操作', align: 'center',  render: (h, { row }) => {
                    if (row.userType !== 0) {
                        return h('span', ''); 
                    }
                    return h('span', [
                        h('a', { on: { click: () => this.showEditModal(row) } }, '编辑'),
                        h('span', { style: {margin: '0 3px', color: '#e8e8e8' } }, '|'),
                        h('Poptip', {
                            props: { confirm: true, title: '您确认删除当前数据吗？', okText: '删除', width: 200, placement: 'left' },
                            on: { 'on-ok': () => this.deleteRow(row) }
                        }, [h('a', '删除')]),
                    ]); 
                }},
            ],
            editFormRuleValidate: {
                username: [ { required: true, message: '登录名必填', trigger: 'blur', whitespace: true } ],
                nickname: [ { required: true, message: '用户名必填', trigger: 'blur', whitespace: true } ],
                locked: [ { type: 'integer', required: true, message: '是否锁定必填', trigger: 'change' } ],
                enabled: [ { type: 'integer', required: true, message: '是否启用必填', trigger: 'change' } ],
                description: [ ]
            },
            addFormRuleValidate: {
                username: [ { required: true, trigger: 'blur', whitespace: true, validator: (rule, value, callback) => {
                    this.addParams.username = (this.addParams.username !== null ? this.addParams.username : '');
                    this.addParams.username = String.trim(this.addParams.username);
                    if (!this.addParams.username || this.addParams.username.length === 0) {
                        callback(new Error("登录名必填"));
                        return;
                    }
                    getUser(this.addParams.username).then(data => {
                        if (data && data.username) {
                            callback(new Error("当前登录名已经被使用"));
                        } else {
                            callback();
                        }
                    }).catch(error => callback(new Error("校验登录名异常")));
                } } ],
                nickname: [ { required: true, message: '用户名必填', trigger: 'blur' } ],
                password: [ { type: "string", required: true, message: '密码必填且长度必须是6-12个字符', trigger: 'blur', max: 12, min: 6 } ],
                passwordConfirm: [ { required: true, trigger: 'blur',validator: (rule, value, callback) => {
                    if (this.addParams.password && this.addParams.password.length > 0 && this.addParams.password !== this.addParams.passwordConfirm) {
                        callback(new Error("两次输入的密码不一致"));
                    }
                    callback();
                } } ]
            }
        };
    },
    mounted() {
        if (!this.tableData.navigatepageNums){
            this.queryData();
        }
    },
    computed: {
        ...mapState('UserList', ['tableLoading', 'tableData', 'queryParams', 'editModal', 'editParams', 'addModal', 'addParams'])
    },
    methods: {
        ...mapActions('UserList', ['queryData', 'deleteRow', 'updateRow', 'addRow']),
        // ...mapMutations('CodeRepository', ['']),
        queryReset() {
            this.$refs.queryForm.resetFields();
        },
        pageChange(pageNo) {
            if (this.queryParams.pageNo !== pageNo){
                this.queryParams.pageNo = pageNo;
                this.queryData();
            }
        },
        pageSizeChange(pageSize) {
            if (this.queryParams.pageSize !== pageSize) {
                this.queryParams.pageNo = 1;
                this.queryParams.pageSize = pageSize;
                this.queryData();
            }
        },
        closeEditModal() {
            this.editModal.show = false;
        },
        showEditModal(row) {
            this.$refs.editForm.resetFields();
            this.editModal.show = true;
            this.editParams.username = row.username;
            // this.editParams.password = row.password;
            this.editParams.nickname = row.nickname;
            this.editParams.telephone = row.telephone;
            this.editParams.email = row.email;
            this.editParams.memberOf = row.memberOf;
            this.editParams.locked = row.locked;
            this.editParams.enabled = row.enabled;
            this.editParams.description = row.description;
        },
        updateRowSubmit() {
            this.$refs.editForm.validate().then((flag) => {
                if (flag) {
                    this.updateRow();
                }
            });
        },
        closeAddModal() {
            this.addModal.show = false;
        },
        showAddModal() {
            this.$refs.addForm.resetFields();
            this.addModal.show = true;
        },
        addRowSubmit() {
            this.$refs.addForm.validate().then((flag) => {
                if (flag) {
                    this.addRow();
                }
            });
        }
    }
};
</script>
